<template>
  <div class="group-message">
    <el-card class="message-card">
      <template #header>
        <div class="card-header">
          <span>群发消息</span>
        </div>
      </template>

      <el-form :model="messageForm" label-width="80px">
        <el-form-item label="接收者">
          <el-select
            v-model="messageForm.receivers"
            multiple
            placeholder="请选择接收者"
            style="width: 100%"
          >
            <el-option
              v-for="student in studentList"
              :key="student.id"
              :label="student.name"
              :value="student.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input
            v-model="messageForm.content"
            type="textarea"
            rows="4"
            placeholder="请输入消息内容"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSend">发送消息</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="history-card">
      <template #header>
        <div class="card-header">
          <span>消息历史</span>
        </div>
      </template>

      <el-timeline>
        <el-timeline-item
          v-for="message in messageHistory"
          :key="message.id"
          :timestamp="message.sendTime"
          placement="top"
        >
          <el-card>
            <h4>发送给: {{ message.receiverNames.join(', ') }}</h4>
            <p>{{ message.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

interface Student {
  id: string
  name: string
}

interface Message {
  id: string
  content: string
  receivers: string[]
  receiverNames: string[]
  sendTime: string
}

const studentList = ref<Student[]>([])
const messageHistory = ref<Message[]>([])
const messageForm = ref({
  receivers: [] as string[],
  content: ''
})

// 发送消息
const handleSend = () => {
  if (messageForm.value.receivers.length === 0) {
    ElMessage.warning('请选择接收者')
    return
  }
  if (!messageForm.value.content.trim()) {
    ElMessage.warning('请输入消息内容')
    return
  }

  // TODO: 调用发送消息API
  const newMessage: Message = {
    id: Date.now().toString(),
    content: messageForm.value.content,
    receivers: messageForm.value.receivers,
    receiverNames: messageForm.value.receivers.map(id => 
      studentList.value.find(s => s.id === id)?.name || ''
    ),
    sendTime: new Date().toLocaleString()
  }
  
  messageHistory.value.unshift(newMessage)
  ElMessage.success('发送成功')
  
  // 清空表单
  messageForm.value = {
    receivers: [],
    content: ''
  }
}

onMounted(() => {
  // TODO: 从API获取学生列表
  studentList.value = [
    { id: '1', name: '张三' },
    { id: '2', name: '李四' },
    { id: '3', name: '王五' }
  ]

  // TODO: 从API获取消息历史
  messageHistory.value = [
    {
      id: '1',
      content: '示例消息',
      receivers: ['1', '2'],
      receiverNames: ['张三', '李四'],
      sendTime: '2024-04-21 10:00:00'
    }
  ]
})
</script>

<style scoped>
.group-message {
  padding: 20px;
}

.message-card,
.history-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-timeline {
  margin-top: 20px;
}
</style>